<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4314922" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xeaca;</span>
                <div class="name">folder-o</div>
                <div class="code-name">&amp;#xeaca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8da;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe8da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d1;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d2;</span>
                <div class="name">folder-open</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">folder-6</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">wenjianjia</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">24gl-fileEmpty</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">wenjian-zhankai</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">maxmin</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">layer_close</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">full-screen</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e5;</span>
                <div class="name">full screen-01</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fc;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe7fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">layer-closed</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">ic_full screen</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">layer_close</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">Full screen</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">full-screen</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">full-screen-off</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">layer_close</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">call_max_minimize</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe892;</span>
                <div class="name">Maximize 2</div>
                <div class="code-name">&amp;#xe892;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">full-screen</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">player_max</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">layer_max</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">layer_max</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">maximize</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">file-excel-o</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">file-zip-o</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">file-excel-o</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ea;</span>
                <div class="name">file-zip-o</div>
                <div class="code-name">&amp;#xe8ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe804;</span>
                <div class="name">file-zip-o</div>
                <div class="code-name">&amp;#xe804;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e6;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe8e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaa0;</span>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">&amp;#xeaa0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebbb;</span>
                <div class="name">random</div>
                <div class="code-name">&amp;#xebbb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec56;</span>
                <div class="name">user-times</div>
                <div class="code-name">&amp;#xec56;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">eye-close</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">file-zip</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe766;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">pencil-square-o</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">207-eye</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">clone</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">file-excel</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe857;</span>
                <div class="name">file-excel-fill</div>
                <div class="code-name">&amp;#xe857;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe859;</span>
                <div class="name">file-zip-fill</div>
                <div class="code-name">&amp;#xe859;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f2;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xefb4;</span>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">&amp;#xefb4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0f5;</span>
                <div class="name">tasks</div>
                <div class="code-name">&amp;#xf0f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf2c0;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xf2c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">task</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe737;</span>
                <div class="name">random</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8dc;</span>
                <div class="name">clone</div>
                <div class="code-name">&amp;#xe8dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fd;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xe8fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe905;</span>
                <div class="name">pencil-square-o</div>
                <div class="code-name">&amp;#xe905;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe90b;</span>
                <div class="name">random</div>
                <div class="code-name">&amp;#xe90b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe920;</span>
                <div class="name">tasks</div>
                <div class="code-name">&amp;#xe920;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92f;</span>
                <div class="name">user-times</div>
                <div class="code-name">&amp;#xe92f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">eye-close</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">tasks</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75d;</span>
                <div class="name">list-alt</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebaa;</span>
                <div class="name">tasks</div>
                <div class="code-name">&amp;#xebaa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">random</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">tasks</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">Close</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8db;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe8db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe816;</span>
                <div class="name">sticky-note</div>
                <div class="code-name">&amp;#xe816;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe762;</span>
                <div class="name">sticky-note</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fe;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe8fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">info_sign</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">import</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">exclamation-sign</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">check04</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74f;</span>
                <div class="name">exclamation</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">exclamation</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">check-box</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">减</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">minus-sign</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">minus-sign</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">减号</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">minus-sign</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf038;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xf038;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b2;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">export</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">th</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe922;</span>
                <div class="name">th</div>
                <div class="code-name">&amp;#xe922;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">th</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">用户-角色-用户名-单人_jurassic</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">减</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf5;</span>
                <div class="name">减号</div>
                <div class="code-name">&amp;#xeaf5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb57;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xeb57;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ee;</span>
                <div class="name">arrowup</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83e;</span>
                <div class="name">long-arrow-down</div>
                <div class="code-name">&amp;#xe83e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83f;</span>
                <div class="name">long-arrow-up</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeac5;</span>
                <div class="name">24gf-folderOpen</div>
                <div class="code-name">&amp;#xeac5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe839;</span>
                <div class="name">down-arrow</div>
                <div class="code-name">&amp;#xe839;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe846;</span>
                <div class="name">up-arrow</div>
                <div class="code-name">&amp;#xe846;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">upload-btn</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">加</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">加号2-fill</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">笔</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">笔</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaf3;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xeaf3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">笔</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86a;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">增加添加加号</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">加号</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">flask</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b1;</span>
                <div class="name">flask</div>
                <div class="code-name">&amp;#xe8b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">叉</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">road</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">云下载</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">修改密码</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">road</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84e;</span>
                <div class="name">th</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">修改密码</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bd;</span>
                <div class="name">对勾小</div>
                <div class="code-name">&amp;#xe8bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">叉</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe908;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe908;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe77e;</span>
                <div class="name">info-circle</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe782;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe844;</span>
                <div class="name">info-circle-fill</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">对</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xf0fc;</span>
                <div class="name">th</div>
                <div class="code-name">&amp;#xf0fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">邮箱-2</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dc;</span>
                <div class="name">info-circle-fill</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dd;</span>
                <div class="name">question-circle-fill</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81f;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe747;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xed1d;</span>
                <div class="name">对勾_块</div>
                <div class="code-name">&amp;#xed1d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xed1e;</span>
                <div class="name">错叉_块</div>
                <div class="code-name">&amp;#xed1e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">information</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">对</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">邮箱</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">编辑表单_编辑录入操作_jurassic</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">编辑角色信息_编辑录入操作_jurassic</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe765;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">扳手</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">修改密码</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb6c;</span>
                <div class="name">扳手</div>
                <div class="code-name">&amp;#xeb6c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb6d;</span>
                <div class="name">扳手</div>
                <div class="code-name">&amp;#xeb6d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">icon_commone_seting</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">扳手</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb3f;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xeb3f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe845;</span>
                <div class="name">tasks</div>
                <div class="code-name">&amp;#xe845;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeba5;</span>
                <div class="name">commenting-o</div>
                <div class="code-name">&amp;#xeba5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">BELL</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">旗子</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">flask</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">file-text</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe858;</span>
                <div class="name">file-text-fill</div>
                <div class="code-name">&amp;#xe858;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe866;</span>
                <div class="name">bell-fill</div>
                <div class="code-name">&amp;#xe866;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">flag-fill</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">bell</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe92e;</span>
                <div class="name">users</div>
                <div class="code-name">&amp;#xe92e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">数据分析</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">database</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">Table</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c1;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe8c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86e;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">地球</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">LOCK</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xebdb;</span>
                <div class="name">sitemap</div>
                <div class="code-name">&amp;#xebdb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeca8;</span>
                <div class="name">user-plus</div>
                <div class="code-name">&amp;#xeca8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">主页</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe741;</span>
                <div class="name">圈</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">commenting</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">institution</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1708309124418') format('woff2'),
       url('iconfont.woff?t=1708309124418') format('woff'),
       url('iconfont.ttf?t=1708309124418') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-foldero"></span>
            <div class="name">
              folder-o
            </div>
            <div class="code-name">.icon-foldero
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder1"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.icon-folder1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-open"></span>
            <div class="name">
              folder-open
            </div>
            <div class="code-name">.icon-folder-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-folder-"></span>
            <div class="name">
              folder-6
            </div>
            <div class="code-name">.icon-folder-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia1"></span>
            <div class="name">
              wenjianjia
            </div>
            <div class="code-name">.icon-wenjianjia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-24gl-fileEmpty"></span>
            <div class="name">
              24gl-fileEmpty
            </div>
            <div class="code-name">.icon-a-24gl-fileEmpty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian-zhankai"></span>
            <div class="name">
              wenjian-zhankai
            </div>
            <div class="code-name">.icon-wenjian-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fangda"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-fangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huifu"></span>
            <div class="name">
              maxmin
            </div>
            <div class="code-name">.icon-huifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer_close"></span>
            <div class="name">
              layer_close
            </div>
            <div class="code-name">.icon-layer_close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-full-screen"></span>
            <div class="name">
              full-screen
            </div>
            <div class="code-name">.icon-full-screen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fullscreen-"></span>
            <div class="name">
              full screen-01
            </div>
            <div class="code-name">.icon-fullscreen-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close2"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer-closed"></span>
            <div class="name">
              layer-closed
            </div>
            <div class="code-name">.icon-layer-closed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ic_fullscreen"></span>
            <div class="name">
              ic_full screen
            </div>
            <div class="code-name">.icon-ic_fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer_close1"></span>
            <div class="name">
              layer_close
            </div>
            <div class="code-name">.icon-layer_close1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-suoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Fullscreen"></span>
            <div class="name">
              Full screen
            </div>
            <div class="code-name">.icon-Fullscreen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-full-screen1"></span>
            <div class="name">
              full-screen
            </div>
            <div class="code-name">.icon-full-screen1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-full-screen-off"></span>
            <div class="name">
              full-screen-off
            </div>
            <div class="code-name">.icon-full-screen-off
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close3"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer_close2"></span>
            <div class="name">
              layer_close
            </div>
            <div class="code-name">.icon-layer_close2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maxminimize"></span>
            <div class="name">
              call_max_minimize
            </div>
            <div class="code-name">.icon-maxminimize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Maximize2"></span>
            <div class="name">
              Maximize 2
            </div>
            <div class="code-name">.icon-Maximize2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-full-screen2"></span>
            <div class="name">
              full-screen
            </div>
            <div class="code-name">.icon-full-screen2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-player_max"></span>
            <div class="name">
              player_max
            </div>
            <div class="code-name">.icon-player_max
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer_max"></span>
            <div class="name">
              layer_max
            </div>
            <div class="code-name">.icon-layer_max
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-layer_max1"></span>
            <div class="name">
              layer_max
            </div>
            <div class="code-name">.icon-layer_max1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maximize"></span>
            <div class="name">
              maximize
            </div>
            <div class="code-name">.icon-maximize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-excel-o"></span>
            <div class="name">
              file-excel-o
            </div>
            <div class="code-name">.icon-file-excel-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-zip-o"></span>
            <div class="name">
              file-zip-o
            </div>
            <div class="code-name">.icon-file-zip-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-excel-o1"></span>
            <div class="name">
              file-excel-o
            </div>
            <div class="code-name">.icon-file-excel-o1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-zip-o1"></span>
            <div class="name">
              file-zip-o
            </div>
            <div class="code-name">.icon-file-zip-o1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-zip-o2"></span>
            <div class="name">
              file-zip-o
            </div>
            <div class="code-name">.icon-file-zip-o2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye4"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamationtriangle"></span>
            <div class="name">
              exclamation-triangle
            </div>
            <div class="code-name">.icon-exclamationtriangle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-random"></span>
            <div class="name">
              random
            </div>
            <div class="code-name">.icon-random
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-usertimes"></span>
            <div class="name">
              user-times
            </div>
            <div class="code-name">.icon-usertimes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eyeclose"></span>
            <div class="name">
              eye-close
            </div>
            <div class="code-name">.icon-eyeclose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-filezip"></span>
            <div class="name">
              file-zip
            </div>
            <div class="code-name">.icon-filezip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-listalt"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.icon-listalt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamationtriangle1"></span>
            <div class="name">
              exclamation-triangle
            </div>
            <div class="code-name">.icon-exclamationtriangle1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pencilsquareo"></span>
            <div class="name">
              pencil-square-o
            </div>
            <div class="code-name">.icon-pencilsquareo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-207-eye"></span>
            <div class="name">
              207-eye
            </div>
            <div class="code-name">.icon-207-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clone"></span>
            <div class="name">
              clone
            </div>
            <div class="code-name">.icon-clone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamation-triangle"></span>
            <div class="name">
              exclamation-triangle
            </div>
            <div class="code-name">.icon-exclamation-triangle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-excel"></span>
            <div class="name">
              file-excel
            </div>
            <div class="code-name">.icon-file-excel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-excel-fill"></span>
            <div class="name">
              file-excel-fill
            </div>
            <div class="code-name">.icon-file-excel-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-zip-fill"></span>
            <div class="name">
              file-zip-fill
            </div>
            <div class="code-name">.icon-file-zip-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus1"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamation-triangle1"></span>
            <div class="name">
              exclamation-triangle
            </div>
            <div class="code-name">.icon-exclamation-triangle1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tasks2"></span>
            <div class="name">
              tasks
            </div>
            <div class="code-name">.icon-tasks2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list-alt"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.icon-list-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-task"></span>
            <div class="name">
              task
            </div>
            <div class="code-name">.icon-task
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-random1"></span>
            <div class="name">
              random
            </div>
            <div class="code-name">.icon-random1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-clone1"></span>
            <div class="name">
              clone
            </div>
            <div class="code-name">.icon-clone1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list-alt1"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.icon-list-alt1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pencil-square-o"></span>
            <div class="name">
              pencil-square-o
            </div>
            <div class="code-name">.icon-pencil-square-o
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-random2"></span>
            <div class="name">
              random
            </div>
            <div class="code-name">.icon-random2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tasks3"></span>
            <div class="name">
              tasks
            </div>
            <div class="code-name">.icon-tasks3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user-times"></span>
            <div class="name">
              user-times
            </div>
            <div class="code-name">.icon-user-times
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list-alt2"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.icon-list-alt2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye-close"></span>
            <div class="name">
              eye-close
            </div>
            <div class="code-name">.icon-eye-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list-alt3"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.icon-list-alt3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tasks4"></span>
            <div class="name">
              tasks
            </div>
            <div class="code-name">.icon-tasks4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye2"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list-alt4"></span>
            <div class="name">
              list-alt
            </div>
            <div class="code-name">.icon-list-alt4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus2"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tasks5"></span>
            <div class="name">
              tasks
            </div>
            <div class="code-name">.icon-tasks5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-random3"></span>
            <div class="name">
              random
            </div>
            <div class="code-name">.icon-random3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tasks6"></span>
            <div class="name">
              tasks
            </div>
            <div class="code-name">.icon-tasks6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-eye1"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.icon-eye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Close"></span>
            <div class="name">
              Close
            </div>
            <div class="code-name">.icon-Close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close1"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-stickynote"></span>
            <div class="name">
              sticky-note
            </div>
            <div class="code-name">.icon-stickynote
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sticky-note"></span>
            <div class="name">
              sticky-note
            </div>
            <div class="code-name">.icon-sticky-note
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info_sign"></span>
            <div class="name">
              info_sign
            </div>
            <div class="code-name">.icon-info_sign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-import"></span>
            <div class="name">
              import
            </div>
            <div class="code-name">.icon-import
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamationsign"></span>
            <div class="name">
              exclamation-sign
            </div>
            <div class="code-name">.icon-exclamationsign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check04"></span>
            <div class="name">
              check04
            </div>
            <div class="code-name">.icon-check04
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamation"></span>
            <div class="name">
              exclamation
            </div>
            <div class="code-name">.icon-exclamation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-exclamation1"></span>
            <div class="name">
              exclamation
            </div>
            <div class="code-name">.icon-exclamation1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check-box"></span>
            <div class="name">
              check-box
            </div>
            <div class="code-name">.icon-check-box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jian1"></span>
            <div class="name">
              减
            </div>
            <div class="code-name">.icon-jian1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minussign"></span>
            <div class="name">
              minus-sign
            </div>
            <div class="code-name">.icon-minussign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minussign1"></span>
            <div class="name">
              minus-sign
            </div>
            <div class="code-name">.icon-minussign1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianhao-"></span>
            <div class="name">
              减号
            </div>
            <div class="code-name">.icon-jianhao-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-minus-sign"></span>
            <div class="name">
              minus-sign
            </div>
            <div class="code-name">.icon-minus-sign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin1"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin2"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-refresh"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin3"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin4"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin5"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin6"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin7"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin8"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin8
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin9"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin9
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download2"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download3"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download4"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download5"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list1"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list2"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list3"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list4"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list5"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list6"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-list7"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.icon-list7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-export"></span>
            <div class="name">
              export
            </div>
            <div class="code-name">.icon-export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down1"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down2"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-th2"></span>
            <div class="name">
              th
            </div>
            <div class="code-name">.icon-th2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-th3"></span>
            <div class="name">
              th
            </div>
            <div class="code-name">.icon-th3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-th4"></span>
            <div class="name">
              th
            </div>
            <div class="code-name">.icon-th4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu2"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu-tianchong"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu-tianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu3"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jurassic_user"></span>
            <div class="name">
              用户-角色-用户名-单人_jurassic
            </div>
            <div class="code-name">.icon-jurassic_user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jian"></span>
            <div class="name">
              减
            </div>
            <div class="code-name">.icon-jian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianhao"></span>
            <div class="name">
              减号
            </div>
            <div class="code-name">.icon-jianhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.icon-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrowup"></span>
            <div class="name">
              arrowup
            </div>
            <div class="code-name">.icon-arrowup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-long-arrow-down"></span>
            <div class="name">
              long-arrow-down
            </div>
            <div class="code-name">.icon-long-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-long-arrow-up"></span>
            <div class="name">
              long-arrow-up
            </div>
            <div class="code-name">.icon-long-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-wenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-24gf-folderOpen"></span>
            <div class="name">
              24gf-folderOpen
            </div>
            <div class="code-name">.icon-24gf-folderOpen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-video1"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.icon-video1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down-arrow"></span>
            <div class="name">
              down-arrow
            </div>
            <div class="code-name">.icon-down-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-up-arrow"></span>
            <div class="name">
              up-arrow
            </div>
            <div class="code-name">.icon-up-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-upload-btn"></span>
            <div class="name">
              upload-btn
            </div>
            <div class="code-name">.icon-upload-btn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jia"></span>
            <div class="name">
              加
            </div>
            <div class="code-name">.icon-jia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao2fill"></span>
            <div class="name">
              加号2-fill
            </div>
            <div class="code-name">.icon-jiahao2fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon-pencil"></span>
            <div class="name">
              笔
            </div>
            <div class="code-name">.icon-icon-pencil
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bi"></span>
            <div class="name">
              笔
            </div>
            <div class="code-name">.icon-bi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao1"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bi1"></span>
            <div class="name">
              笔
            </div>
            <div class="code-name">.icon-bi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao2"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zengjiatianjiajiahao"></span>
            <div class="name">
              增加添加加号
            </div>
            <div class="code-name">.icon-zengjiatianjiajiahao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiahao3"></span>
            <div class="name">
              加号
            </div>
            <div class="code-name">.icon-jiahao3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-home1"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.icon-home1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flask1"></span>
            <div class="name">
              flask
            </div>
            <div class="code-name">.icon-flask1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flask2"></span>
            <div class="name">
              flask
            </div>
            <div class="code-name">.icon-flask2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cha"></span>
            <div class="name">
              叉
            </div>
            <div class="code-name">.icon-cha
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-road"></span>
            <div class="name">
              road
            </div>
            <div class="code-name">.icon-road
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yunxiazai"></span>
            <div class="name">
              云下载
            </div>
            <div class="code-name">.icon-yunxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai1"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaimima"></span>
            <div class="name">
              修改密码
            </div>
            <div class="code-name">.icon-xiugaimima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai14"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-xiazai14
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-road1"></span>
            <div class="name">
              road
            </div>
            <div class="code-name">.icon-road1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-th"></span>
            <div class="name">
              th
            </div>
            <div class="code-name">.icon-th
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file1"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaimima1"></span>
            <div class="name">
              修改密码
            </div>
            <div class="code-name">.icon-xiugaimima1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duigouxiao"></span>
            <div class="name">
              对勾小
            </div>
            <div class="code-name">.icon-duigouxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cha1"></span>
            <div class="name">
              叉
            </div>
            <div class="code-name">.icon-cha1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai2"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang1"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang2"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info-circle"></span>
            <div class="name">
              info-circle
            </div>
            <div class="code-name">.icon-info-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle1"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info-circle-fill"></span>
            <div class="name">
              info-circle-fill
            </div>
            <div class="code-name">.icon-info-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dui"></span>
            <div class="name">
              对
            </div>
            <div class="code-name">.icon-dui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-th1"></span>
            <div class="name">
              th
            </div>
            <div class="code-name">.icon-th1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang3"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai3"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang-"></span>
            <div class="name">
              邮箱-2
            </div>
            <div class="code-name">.icon-youxiang-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-info-circle-fill1"></span>
            <div class="name">
              info-circle-fill
            </div>
            <div class="code-name">.icon-info-circle-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle-fill"></span>
            <div class="name">
              question-circle-fill
            </div>
            <div class="code-name">.icon-question-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle2"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle3"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle4"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duigou_kuai"></span>
            <div class="name">
              对勾_块
            </div>
            <div class="code-name">.icon-duigou_kuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuocha_kuai"></span>
            <div class="name">
              错叉_块
            </div>
            <div class="code-name">.icon-cuocha_kuai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-information"></span>
            <div class="name">
              information
            </div>
            <div class="code-name">.icon-information
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dui1"></span>
            <div class="name">
              对
            </div>
            <div class="code-name">.icon-dui1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youxiang4"></span>
            <div class="name">
              邮箱
            </div>
            <div class="code-name">.icon-youxiang4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jurassic_edit-form"></span>
            <div class="name">
              编辑表单_编辑录入操作_jurassic
            </div>
            <div class="code-name">.icon-jurassic_edit-form
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jurassic_edit-user"></span>
            <div class="name">
              编辑角色信息_编辑录入操作_jurassic
            </div>
            <div class="code-name">.icon-jurassic_edit-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu1"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banshou"></span>
            <div class="name">
              扳手
            </div>
            <div class="code-name">.icon-banshou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugaimima2"></span>
            <div class="name">
              修改密码
            </div>
            <div class="code-name">.icon-xiugaimima2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wrench"></span>
            <div class="name">
              扳手
            </div>
            <div class="code-name">.icon-wrench
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wrench-fill"></span>
            <div class="name">
              扳手
            </div>
            <div class="code-name">.icon-wrench-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_commone_seting"></span>
            <div class="name">
              icon_commone_seting
            </div>
            <div class="code-name">.icon-icon_commone_seting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-spanner-fill"></span>
            <div class="name">
              扳手
            </div>
            <div class="code-name">.icon-spanner-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-question-circle5"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.icon-question-circle5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock2"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file2"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock3"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock4"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file3"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file4"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share3"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share4"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tasks"></span>
            <div class="name">
              tasks
            </div>
            <div class="code-name">.icon-tasks
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-commentingo"></span>
            <div class="name">
              commenting-o
            </div>
            <div class="code-name">.icon-commentingo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuan"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.icon-yuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-22BELL"></span>
            <div class="name">
              BELL
            </div>
            <div class="code-name">.icon-22BELL
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qizi"></span>
            <div class="name">
              旗子
            </div>
            <div class="code-name">.icon-qizi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flask"></span>
            <div class="name">
              flask
            </div>
            <div class="code-name">.icon-flask
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-big-circle"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.icon-big-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-text"></span>
            <div class="name">
              file-text
            </div>
            <div class="code-name">.icon-file-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file-text-fill"></span>
            <div class="name">
              file-text-fill
            </div>
            <div class="code-name">.icon-file-text-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell-fill"></span>
            <div class="name">
              bell-fill
            </div>
            <div class="code-name">.icon-bell-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-flag-fill"></span>
            <div class="name">
              flag-fill
            </div>
            <div class="code-name">.icon-flag-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bell"></span>
            <div class="name">
              bell
            </div>
            <div class="code-name">.icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-users"></span>
            <div class="name">
              users
            </div>
            <div class="code-name">.icon-users
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianzu4"></span>
            <div class="name">
              数据分析
            </div>
            <div class="code-name">.icon-bianzu4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-database"></span>
            <div class="name">
              database
            </div>
            <div class="code-name">.icon-database
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Table"></span>
            <div class="name">
              Table
            </div>
            <div class="code-name">.icon-Table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit1"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-edit1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share1"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit2"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-download1"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.icon-download1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-share2"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.icon-share2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diqiu"></span>
            <div class="name">
              地球
            </div>
            <div class="code-name">.icon-diqiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              LOCK
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sitemap"></span>
            <div class="name">
              sitemap
            </div>
            <div class="code-name">.icon-sitemap
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-userplus"></span>
            <div class="name">
              user-plus
            </div>
            <div class="code-name">.icon-userplus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuye"></span>
            <div class="name">
              主页
            </div>
            <div class="code-name">.icon-zhuye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quan"></span>
            <div class="name">
              圈
            </div>
            <div class="code-name">.icon-quan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-commenting"></span>
            <div class="name">
              commenting
            </div>
            <div class="code-name">.icon-commenting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-institution"></span>
            <div class="name">
              institution
            </div>
            <div class="code-name">.icon-institution
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-foldero"></use>
                </svg>
                <div class="name">folder-o</div>
                <div class="code-name">#icon-foldero</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder1"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#icon-folder1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-open"></use>
                </svg>
                <div class="name">folder-open</div>
                <div class="code-name">#icon-folder-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-folder-"></use>
                </svg>
                <div class="name">folder-6</div>
                <div class="code-name">#icon-folder-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia1"></use>
                </svg>
                <div class="name">wenjianjia</div>
                <div class="code-name">#icon-wenjianjia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-24gl-fileEmpty"></use>
                </svg>
                <div class="name">24gl-fileEmpty</div>
                <div class="code-name">#icon-a-24gl-fileEmpty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian-zhankai"></use>
                </svg>
                <div class="name">wenjian-zhankai</div>
                <div class="code-name">#icon-wenjian-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fangda"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-fangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huifu"></use>
                </svg>
                <div class="name">maxmin</div>
                <div class="code-name">#icon-huifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer_close"></use>
                </svg>
                <div class="name">layer_close</div>
                <div class="code-name">#icon-layer_close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-full-screen"></use>
                </svg>
                <div class="name">full-screen</div>
                <div class="code-name">#icon-full-screen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fullscreen-"></use>
                </svg>
                <div class="name">full screen-01</div>
                <div class="code-name">#icon-fullscreen-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close2"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer-closed"></use>
                </svg>
                <div class="name">layer-closed</div>
                <div class="code-name">#icon-layer-closed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ic_fullscreen"></use>
                </svg>
                <div class="name">ic_full screen</div>
                <div class="code-name">#icon-ic_fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer_close1"></use>
                </svg>
                <div class="name">layer_close</div>
                <div class="code-name">#icon-layer_close1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-suoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Fullscreen"></use>
                </svg>
                <div class="name">Full screen</div>
                <div class="code-name">#icon-Fullscreen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-full-screen1"></use>
                </svg>
                <div class="name">full-screen</div>
                <div class="code-name">#icon-full-screen1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-full-screen-off"></use>
                </svg>
                <div class="name">full-screen-off</div>
                <div class="code-name">#icon-full-screen-off</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close3"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer_close2"></use>
                </svg>
                <div class="name">layer_close</div>
                <div class="code-name">#icon-layer_close2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maxminimize"></use>
                </svg>
                <div class="name">call_max_minimize</div>
                <div class="code-name">#icon-maxminimize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Maximize2"></use>
                </svg>
                <div class="name">Maximize 2</div>
                <div class="code-name">#icon-Maximize2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-full-screen2"></use>
                </svg>
                <div class="name">full-screen</div>
                <div class="code-name">#icon-full-screen2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-player_max"></use>
                </svg>
                <div class="name">player_max</div>
                <div class="code-name">#icon-player_max</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer_max"></use>
                </svg>
                <div class="name">layer_max</div>
                <div class="code-name">#icon-layer_max</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-layer_max1"></use>
                </svg>
                <div class="name">layer_max</div>
                <div class="code-name">#icon-layer_max1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maximize"></use>
                </svg>
                <div class="name">maximize</div>
                <div class="code-name">#icon-maximize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-excel-o"></use>
                </svg>
                <div class="name">file-excel-o</div>
                <div class="code-name">#icon-file-excel-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-zip-o"></use>
                </svg>
                <div class="name">file-zip-o</div>
                <div class="code-name">#icon-file-zip-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-excel-o1"></use>
                </svg>
                <div class="name">file-excel-o</div>
                <div class="code-name">#icon-file-excel-o1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-zip-o1"></use>
                </svg>
                <div class="name">file-zip-o</div>
                <div class="code-name">#icon-file-zip-o1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-zip-o2"></use>
                </svg>
                <div class="name">file-zip-o</div>
                <div class="code-name">#icon-file-zip-o2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye4"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamationtriangle"></use>
                </svg>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">#icon-exclamationtriangle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-random"></use>
                </svg>
                <div class="name">random</div>
                <div class="code-name">#icon-random</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-usertimes"></use>
                </svg>
                <div class="name">user-times</div>
                <div class="code-name">#icon-usertimes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eyeclose"></use>
                </svg>
                <div class="name">eye-close</div>
                <div class="code-name">#icon-eyeclose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-filezip"></use>
                </svg>
                <div class="name">file-zip</div>
                <div class="code-name">#icon-filezip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-listalt"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#icon-listalt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamationtriangle1"></use>
                </svg>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">#icon-exclamationtriangle1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pencilsquareo"></use>
                </svg>
                <div class="name">pencil-square-o</div>
                <div class="code-name">#icon-pencilsquareo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-207-eye"></use>
                </svg>
                <div class="name">207-eye</div>
                <div class="code-name">#icon-207-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clone"></use>
                </svg>
                <div class="name">clone</div>
                <div class="code-name">#icon-clone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamation-triangle"></use>
                </svg>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">#icon-exclamation-triangle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-excel"></use>
                </svg>
                <div class="name">file-excel</div>
                <div class="code-name">#icon-file-excel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-excel-fill"></use>
                </svg>
                <div class="name">file-excel-fill</div>
                <div class="code-name">#icon-file-excel-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-zip-fill"></use>
                </svg>
                <div class="name">file-zip-fill</div>
                <div class="code-name">#icon-file-zip-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus1"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#icon-plus1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamation-triangle1"></use>
                </svg>
                <div class="name">exclamation-triangle</div>
                <div class="code-name">#icon-exclamation-triangle1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasks2"></use>
                </svg>
                <div class="name">tasks</div>
                <div class="code-name">#icon-tasks2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-alt"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#icon-list-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-task"></use>
                </svg>
                <div class="name">task</div>
                <div class="code-name">#icon-task</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-random1"></use>
                </svg>
                <div class="name">random</div>
                <div class="code-name">#icon-random1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-clone1"></use>
                </svg>
                <div class="name">clone</div>
                <div class="code-name">#icon-clone1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-alt1"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#icon-list-alt1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pencil-square-o"></use>
                </svg>
                <div class="name">pencil-square-o</div>
                <div class="code-name">#icon-pencil-square-o</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-random2"></use>
                </svg>
                <div class="name">random</div>
                <div class="code-name">#icon-random2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasks3"></use>
                </svg>
                <div class="name">tasks</div>
                <div class="code-name">#icon-tasks3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user-times"></use>
                </svg>
                <div class="name">user-times</div>
                <div class="code-name">#icon-user-times</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-alt2"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#icon-list-alt2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye-close"></use>
                </svg>
                <div class="name">eye-close</div>
                <div class="code-name">#icon-eye-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-alt3"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#icon-list-alt3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasks4"></use>
                </svg>
                <div class="name">tasks</div>
                <div class="code-name">#icon-tasks4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye2"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list-alt4"></use>
                </svg>
                <div class="name">list-alt</div>
                <div class="code-name">#icon-list-alt4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus2"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#icon-plus2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasks5"></use>
                </svg>
                <div class="name">tasks</div>
                <div class="code-name">#icon-tasks5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-random3"></use>
                </svg>
                <div class="name">random</div>
                <div class="code-name">#icon-random3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasks6"></use>
                </svg>
                <div class="name">tasks</div>
                <div class="code-name">#icon-tasks6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-eye1"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#icon-eye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Close"></use>
                </svg>
                <div class="name">Close</div>
                <div class="code-name">#icon-Close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close1"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-stickynote"></use>
                </svg>
                <div class="name">sticky-note</div>
                <div class="code-name">#icon-stickynote</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sticky-note"></use>
                </svg>
                <div class="name">sticky-note</div>
                <div class="code-name">#icon-sticky-note</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info_sign"></use>
                </svg>
                <div class="name">info_sign</div>
                <div class="code-name">#icon-info_sign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-import"></use>
                </svg>
                <div class="name">import</div>
                <div class="code-name">#icon-import</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamationsign"></use>
                </svg>
                <div class="name">exclamation-sign</div>
                <div class="code-name">#icon-exclamationsign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check04"></use>
                </svg>
                <div class="name">check04</div>
                <div class="code-name">#icon-check04</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamation"></use>
                </svg>
                <div class="name">exclamation</div>
                <div class="code-name">#icon-exclamation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-exclamation1"></use>
                </svg>
                <div class="name">exclamation</div>
                <div class="code-name">#icon-exclamation1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check-box"></use>
                </svg>
                <div class="name">check-box</div>
                <div class="code-name">#icon-check-box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jian1"></use>
                </svg>
                <div class="name">减</div>
                <div class="code-name">#icon-jian1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minussign"></use>
                </svg>
                <div class="name">minus-sign</div>
                <div class="code-name">#icon-minussign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minussign1"></use>
                </svg>
                <div class="name">minus-sign</div>
                <div class="code-name">#icon-minussign1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianhao-"></use>
                </svg>
                <div class="name">减号</div>
                <div class="code-name">#icon-jianhao-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-minus-sign"></use>
                </svg>
                <div class="name">minus-sign</div>
                <div class="code-name">#icon-minus-sign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin1"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin2"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-refresh"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin3"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin4"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin5"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin6"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin7"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin8"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin8</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin9"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin9</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download2"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download3"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download4"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download5"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list1"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list2"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list3"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list4"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list5"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list6"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-list7"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#icon-list7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-export"></use>
                </svg>
                <div class="name">export</div>
                <div class="code-name">#icon-export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down1"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down2"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-th2"></use>
                </svg>
                <div class="name">th</div>
                <div class="code-name">#icon-th2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-th3"></use>
                </svg>
                <div class="name">th</div>
                <div class="code-name">#icon-th3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-th4"></use>
                </svg>
                <div class="name">th</div>
                <div class="code-name">#icon-th4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu2"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu-tianchong"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu-tianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu3"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jurassic_user"></use>
                </svg>
                <div class="name">用户-角色-用户名-单人_jurassic</div>
                <div class="code-name">#icon-jurassic_user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jian"></use>
                </svg>
                <div class="name">减</div>
                <div class="code-name">#icon-jian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianhao"></use>
                </svg>
                <div class="name">减号</div>
                <div class="code-name">#icon-jianhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#icon-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrowup"></use>
                </svg>
                <div class="name">arrowup</div>
                <div class="code-name">#icon-arrowup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-long-arrow-down"></use>
                </svg>
                <div class="name">long-arrow-down</div>
                <div class="code-name">#icon-long-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-long-arrow-up"></use>
                </svg>
                <div class="name">long-arrow-up</div>
                <div class="code-name">#icon-long-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-wenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-24gf-folderOpen"></use>
                </svg>
                <div class="name">24gf-folderOpen</div>
                <div class="code-name">#icon-24gf-folderOpen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-video1"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#icon-video1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down-arrow"></use>
                </svg>
                <div class="name">down-arrow</div>
                <div class="code-name">#icon-down-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-up-arrow"></use>
                </svg>
                <div class="name">up-arrow</div>
                <div class="code-name">#icon-up-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload-btn"></use>
                </svg>
                <div class="name">upload-btn</div>
                <div class="code-name">#icon-upload-btn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jia"></use>
                </svg>
                <div class="name">加</div>
                <div class="code-name">#icon-jia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao2fill"></use>
                </svg>
                <div class="name">加号2-fill</div>
                <div class="code-name">#icon-jiahao2fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon-pencil"></use>
                </svg>
                <div class="name">笔</div>
                <div class="code-name">#icon-icon-pencil</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bi"></use>
                </svg>
                <div class="name">笔</div>
                <div class="code-name">#icon-bi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao1"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bi1"></use>
                </svg>
                <div class="name">笔</div>
                <div class="code-name">#icon-bi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao2"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zengjiatianjiajiahao"></use>
                </svg>
                <div class="name">增加添加加号</div>
                <div class="code-name">#icon-zengjiatianjiajiahao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiahao3"></use>
                </svg>
                <div class="name">加号</div>
                <div class="code-name">#icon-jiahao3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home1"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#icon-home1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flask1"></use>
                </svg>
                <div class="name">flask</div>
                <div class="code-name">#icon-flask1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flask2"></use>
                </svg>
                <div class="name">flask</div>
                <div class="code-name">#icon-flask2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cha"></use>
                </svg>
                <div class="name">叉</div>
                <div class="code-name">#icon-cha</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-road"></use>
                </svg>
                <div class="name">road</div>
                <div class="code-name">#icon-road</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunxiazai"></use>
                </svg>
                <div class="name">云下载</div>
                <div class="code-name">#icon-yunxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai1"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaimima"></use>
                </svg>
                <div class="name">修改密码</div>
                <div class="code-name">#icon-xiugaimima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai14"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-xiazai14</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-road1"></use>
                </svg>
                <div class="name">road</div>
                <div class="code-name">#icon-road1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-th"></use>
                </svg>
                <div class="name">th</div>
                <div class="code-name">#icon-th</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file1"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaimima1"></use>
                </svg>
                <div class="name">修改密码</div>
                <div class="code-name">#icon-xiugaimima1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duigouxiao"></use>
                </svg>
                <div class="name">对勾小</div>
                <div class="code-name">#icon-duigouxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cha1"></use>
                </svg>
                <div class="name">叉</div>
                <div class="code-name">#icon-cha1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai2"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang1"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang2"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle"></use>
                </svg>
                <div class="name">info-circle</div>
                <div class="code-name">#icon-info-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle1"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle-fill"></use>
                </svg>
                <div class="name">info-circle-fill</div>
                <div class="code-name">#icon-info-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dui"></use>
                </svg>
                <div class="name">对</div>
                <div class="code-name">#icon-dui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-th1"></use>
                </svg>
                <div class="name">th</div>
                <div class="code-name">#icon-th1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang3"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai3"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang-"></use>
                </svg>
                <div class="name">邮箱-2</div>
                <div class="code-name">#icon-youxiang-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-info-circle-fill1"></use>
                </svg>
                <div class="name">info-circle-fill</div>
                <div class="code-name">#icon-info-circle-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle-fill"></use>
                </svg>
                <div class="name">question-circle-fill</div>
                <div class="code-name">#icon-question-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle2"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle3"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle4"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duigou_kuai"></use>
                </svg>
                <div class="name">对勾_块</div>
                <div class="code-name">#icon-duigou_kuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuocha_kuai"></use>
                </svg>
                <div class="name">错叉_块</div>
                <div class="code-name">#icon-cuocha_kuai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-information"></use>
                </svg>
                <div class="name">information</div>
                <div class="code-name">#icon-information</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dui1"></use>
                </svg>
                <div class="name">对</div>
                <div class="code-name">#icon-dui1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youxiang4"></use>
                </svg>
                <div class="name">邮箱</div>
                <div class="code-name">#icon-youxiang4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jurassic_edit-form"></use>
                </svg>
                <div class="name">编辑表单_编辑录入操作_jurassic</div>
                <div class="code-name">#icon-jurassic_edit-form</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jurassic_edit-user"></use>
                </svg>
                <div class="name">编辑角色信息_编辑录入操作_jurassic</div>
                <div class="code-name">#icon-jurassic_edit-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu1"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banshou"></use>
                </svg>
                <div class="name">扳手</div>
                <div class="code-name">#icon-banshou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugaimima2"></use>
                </svg>
                <div class="name">修改密码</div>
                <div class="code-name">#icon-xiugaimima2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wrench"></use>
                </svg>
                <div class="name">扳手</div>
                <div class="code-name">#icon-wrench</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wrench-fill"></use>
                </svg>
                <div class="name">扳手</div>
                <div class="code-name">#icon-wrench-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_commone_seting"></use>
                </svg>
                <div class="name">icon_commone_seting</div>
                <div class="code-name">#icon-icon_commone_seting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-spanner-fill"></use>
                </svg>
                <div class="name">扳手</div>
                <div class="code-name">#icon-spanner-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-question-circle5"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#icon-question-circle5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock2"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file2"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock3"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock4"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file3"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file4"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share3"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share4"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tasks"></use>
                </svg>
                <div class="name">tasks</div>
                <div class="code-name">#icon-tasks</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-commentingo"></use>
                </svg>
                <div class="name">commenting-o</div>
                <div class="code-name">#icon-commentingo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuan"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#icon-yuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-22BELL"></use>
                </svg>
                <div class="name">BELL</div>
                <div class="code-name">#icon-22BELL</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qizi"></use>
                </svg>
                <div class="name">旗子</div>
                <div class="code-name">#icon-qizi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flask"></use>
                </svg>
                <div class="name">flask</div>
                <div class="code-name">#icon-flask</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-big-circle"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#icon-big-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-text"></use>
                </svg>
                <div class="name">file-text</div>
                <div class="code-name">#icon-file-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file-text-fill"></use>
                </svg>
                <div class="name">file-text-fill</div>
                <div class="code-name">#icon-file-text-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell-fill"></use>
                </svg>
                <div class="name">bell-fill</div>
                <div class="code-name">#icon-bell-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-flag-fill"></use>
                </svg>
                <div class="name">flag-fill</div>
                <div class="code-name">#icon-flag-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bell"></use>
                </svg>
                <div class="name">bell</div>
                <div class="code-name">#icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-users"></use>
                </svg>
                <div class="name">users</div>
                <div class="code-name">#icon-users</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianzu4"></use>
                </svg>
                <div class="name">数据分析</div>
                <div class="code-name">#icon-bianzu4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-database"></use>
                </svg>
                <div class="name">database</div>
                <div class="code-name">#icon-database</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Table"></use>
                </svg>
                <div class="name">Table</div>
                <div class="code-name">#icon-Table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit1"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-edit1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share1"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit2"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-download1"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#icon-download1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-share2"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#icon-share2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diqiu"></use>
                </svg>
                <div class="name">地球</div>
                <div class="code-name">#icon-diqiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">LOCK</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sitemap"></use>
                </svg>
                <div class="name">sitemap</div>
                <div class="code-name">#icon-sitemap</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-userplus"></use>
                </svg>
                <div class="name">user-plus</div>
                <div class="code-name">#icon-userplus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuye"></use>
                </svg>
                <div class="name">主页</div>
                <div class="code-name">#icon-zhuye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quan"></use>
                </svg>
                <div class="name">圈</div>
                <div class="code-name">#icon-quan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-commenting"></use>
                </svg>
                <div class="name">commenting</div>
                <div class="code-name">#icon-commenting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-institution"></use>
                </svg>
                <div class="name">institution</div>
                <div class="code-name">#icon-institution</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
